<template>
  <a-modal v-model:visible="dialogOpenStatus" :maskClosable="false" :width="480" :centered="true" okText="保存指标分栏" title="新增模型指标分栏"
    :destroyOnClose="true" class="add-indicator-item-dialog" @cancel="dialogClose">
    <a-form :model="addFormData" ref="dialogForm" :rules="rules" :hideRequiredMark="true">
      <a-form-item label="指标名称" name="name">
        <a-input v-model:value="addFormData.name" placeholder="请输入指标名称" autocomplete="off" />
      </a-form-item>
      <a-form-item label="指标使用说明" name="description">
        <a-textarea v-model:value="addFormData.description" placeholder="请输入指标使用说明" class="textarea-ipt" />
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="dialog-footer-box">
        <div class="cancel-btn" @click="dialogClose">取消</div>
        <div class="ok-btn" @click="saveOptions">保存指标分栏</div>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { defineEmits, ref, defineProps, watch } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import type { FormInstance } from 'ant-design-vue';

const rules = ref<Record<string, Rule[]>>({
  name: [
    {
      required: true, trigger: ["blur", "change"], validator: nameValidator("指标名称")
    }
  ]
});

function nameValidator(str: string) {
  return (_rule, value) => {
    if (value && value.toString().trim() || value.toString().trim() == "0") {
      return Promise.resolve();
    }
    return Promise.reject(`请输入${str}`);
  };
}

const props = withDefaults(defineProps<{
  openStatus: boolean;
}>(), {
  openStatus: false
});

watch(() => props.openStatus, (newValue) => {
  dialogOpenStatus.value = newValue;
});

const emits = defineEmits<{
  (e: "update:openStatus", payload: boolean): void;
  (e: "dataChange", payload: typeof addFormData.value): void;
}>();

const dialogOpenStatus = ref<boolean>(props.openStatus);
const dialogForm = ref<FormInstance>();


function dialogClose() {
  addFormData.value = {
    name: "",
    description: ""
  };
  emits("update:openStatus", false);
}

//表单数据
const addFormData = ref({
  name: "",
  description: ""
});

/**
 * 验证表单
 */
async function saveOptions() {
  try {
    await dialogForm.value?.validateFields();
    // 通过验证将数据反馈给父组件
    emits("dataChange", addFormData.value);
    dialogClose();
  } catch (error) {

  }
}


</script>

<style lang="less">
.add-indicator-item-dialog {
  .ant-modal-header {
    height: 56px;
    padding: 0px 20px;
    display: flex;
    align-items: center;
  }

  .ant-modal-body {
    padding: 32px 58px !important;
    box-sizing: border-box;

    .ant-form {
      &>.ant-form-item:last-of-type {
        margin-bottom: 0px;
      }

      .ant-form-item {
        margin-bottom: 16px;
        justify-content: flex-end;

        .ant-form-item-label {
          label {
            &::after {
              display: none;
            }
          }
        }

        .ant-form-item-control {
          margin-left: 12px;
          width: 240px;
          max-width: unset;
          flex: unset;

          .ant-form-item-explain-connected {
            display: none;
          }

          .ant-form-item-control-input {
            padding-left: 0px !important;

            .ant-input {
              border-radius: 4px;

              &.textarea-ipt {
                min-height: 72px;
              }
            }
          }
        }
      }
    }
  }

  .ant-modal-footer {
    height: 62px;
    padding: 10px 20px 20px 20px;
    border-top: unset;
    box-sizing: border-box;

    .dialog-footer-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .ok-btn,
      .cancel-btn {
        font-size: 14px;
        padding: 0px 16px;
        border-radius: 4px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .cancel-btn {
        border: 1px solid #DCDFE6;
        color: #606266;

        &:hover {
          border-color: #C11A20;
          color: #C11A20;
        }
      }

      .ok-btn {
        background: #C11A20;
        color: #fff;
        margin-left: 12px;
      }
    }
  }

  .ant-modal-close {
    top: 20px;
    right: 20px;

    .ant-modal-close-x {
      width: 16px;
      height: 16px;
      line-height: 1;
    }
  }
}
</style>